<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="applicable-device" content="pc">
    <title>豆咖音乐网-排行榜</title>
</script>
    <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/layout_0412.css?max_age=25920000&amp;v=20190312">
    <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/toplist_ae95fdcf.css?max_age=25920000">
	<link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/popup_login.css?max_age=25920000"><link rel="stylesheet" type="text/css" href="//stdl.qq.com/stdl/qqbrowser/floatlayer/css/qb-ie-remind.css?1592225525140"><!--[if lt IE 8]><script src='//stdl.qq.com/stdl/qb/js/json2.js'></script><![endif]--><script charset="utf-8" async="" src="//stdl.qq.com/stdl/qb/js/qblog.js?1592225525140"></script>
		
	<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
	<link rel="shortcut icon" href="favicon.ico" mce_href="http://jt.hapboy.xyz/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="leaderboard/assets/css/reset.css">
	<link rel="stylesheet" href="leaderboard/assets/css/common.css">
	<link rel="stylesheet" href="leaderboard/assets/css/slider.css">
	<link rel="stylesheet" href="leaderboard/assets/css/font-awesome.min.css">
	<script src="leaderboard/assets/js/jquery.min.js"></script>
	<script src="leaderboard/assets/js/HBSlider.js"></script>
	<script src="leaderboard/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="leaderboard/css/auth.css">
	<script src="leaderboard/js/auth.js"></script>
	<script src="leaderboard/js/jquery-3.5.1.js"></script>
	<style>
		.pictureSize{
	  		width:45px;
	  		height:45px;
	  		border: 1px solid white;
	  		border-radius: 30px;
	  		margin-top:5px;
  		}
  	 	.commen_list{
	  		text-align: left;
	  	}
	  	.selectItem{
	  		background-color: #B72712;
	  		color: white;
	  	}
	  	.singerPicture{
	  		height:70px;
	  		width:70px
	  	}
	  	.mod_page_nav {
		    font-size: 16px;
		}
	</style>
</head>

<body class="os_mac">
   <!-- 头部 S -->
<div class="mod_header">
        <header>
			<div class="container">
				<div class="navbar-header">
					<a href="" class="navbar-brand">
						<img src="assets/images/logo.png" alt="">
					</a>
				</div>
				<nav>
					<ul class="nav navbar-nav navbar-link" style="display: block;">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="#">我的音乐</a>
						</li>
						<li>
							<a href="#">歌手</a>
						</li>
						<li class="active">
							<a href="#">排行榜</a>
						</li>
						<li>
							<a href="#">会员中心</a>
						</li>
						<li>
							<a href="#">歌曲广场</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right navbar-sm" style="display: block;">
						<li><input type="text" class="search-input" placeholder="歌名 / 歌手"></li>
						<li>
							<a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
						</li>
						<li id="loginItem">
							<a href="register_login.jsp">注册 / 登录</a>
						</li>
					</ul>
				</nav>
			</div>
		</header>
    </div>
    
    <!-- 头部 E -->

<div class="main">
   
        <div class="toplist_nav" style="margin-left: 80px;">
           
            <dl class="toplist_nav__list">
                <dt class="toplist_nav__tit">巅峰榜</dt>
		
                <dd class="toplist_nav__item"><a href="#" id="hotSongList" class="toplist_nav__link selectItem">热歌榜</a></dd>
		
                <dd class="toplist_nav__item"><a href="#" id="newSongList" class="toplist_nav__link">新歌榜</a></dd>
		
            </dl>
	    
            <dl class="toplist_nav__list">
                <dt class="toplist_nav__tit">地区榜</dt>
		
                <dd class="toplist_nav__item"><a href="#" id="inlandSongList" class="toplist_nav__link">内地榜</a></dd>
		
                <dd class="toplist_nav__item"><a href="#" id="hktwSongList" class="toplist_nav__link">港台榜</a></dd>
		
                <dd class="toplist_nav__item"><a href="#" id="europeSongList" class="toplist_nav__link">欧美榜</a></dd>
		
                <dd class="toplist_nav__item"><a href="#" id="koreaSongList" class="toplist_nav__link">韩国榜</a></dd>
		
                <dd class="toplist_nav__item"><a href="#" id="japanSongList" class="toplist_nav__link">日本榜</a></dd>
		
            </dl>
	    
        </div>

	
        <div class="mod_toplist" >
            <div class="toplist__hd">
                <h1 class="toplist__tit" style="color: black;position: relative;left: 40px;" id="titleContext">热歌榜</h1>
                <span style="color: black;position: relative;left: 40px;font-size:10px" id="subtitleContext">收录本周热度排行前20的歌曲</span>
            </div>
            <div class="mod_songlist_toolbar commen_list" style="position: relative;left: -45px;">
                <a href="#" class="mod_btn_green js_all_play" id="playAll"><i class="mod_btn_green__icon_play"></i>播放全部</a>
            </div>
            <div class="mod_songlist" style="position: relative;left: 42px;">
                <ul class="songlist__header">
                    <li class="songlist__edit sprite">
                        <input type="checkbox" class="songlist__checkbox js_check_all">
                    </li>
                    <li class="songlist__header_name">歌曲</li>
                    <li class="songlist__header_author">歌手</li>
                    <li class="songlist__header_time">时长</li>
                </ul>

    <ul class="songlist__list" id="songShowList">
		<li mid="268352018" ix="0">
			<div class="songlist__item" onmouseover="this.className=(this.className+' songlist__item--hover')" onmouseout="this.className=this.className.replace(/ songlist__item--hover/, '')">
				<div class="songlist__edit songlist__edit--check sprite">
			    	<input type="checkbox" class="songlist__checkbox">
				</div> 
			
			<div class="songlist__number  songlist__number--top">1</div>
		
		    <div class="songlist__rank"><i class="icon_rank_popular"></i>551%</div>
		
		    <div class="songlist__songname">
		    
			<span class="songlist__songname_txt" style="visibility: visible;">
			    <a href="https://y.qq.com/n/yqq/album/0009C3rp3Kfwg0.html" class="songlist__cover album_name" data-albummid="0009C3rp3Kfwg0" data-albumid="12924001"><img onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;" src="//y.gtimg.cn/music/photo_new/T002R90x90M0000009C3rp3Kfwg0.jpg?max_age=2592000" data-original="//y.gtimg.cn/music/photo_new/T002R90x90M0000009C3rp3Kfwg0.jpg?max_age=2592000" alt="Mojito" class="songlist__pic" style="display: block; visibility: visible;"></a>
			    <a href="https://y.qq.com/n/yqq/song/001glaI72k8BQX.html" class="js_song" title="Mojito ">Mojito</a>
			    
			</span>
			<div class="mod_list_menu">
				<a href="javascript:;" class="list_menu__item list_menu__play js_play" title="播放">
				    <i class="list_menu__icon_play"></i>
				    <span class="icon_txt">播放</span>
				</a>
				<a href="javascript:;" class="list_menu__item list_menu__add js_fav" title="添加到歌单" aria-haspopup="true" data-target="menu_add">
				    <i class="list_menu__icon_add"></i>
				    <span class="icon_txt">添加到歌单</span>
				</a>
				
				<a href="javascript:;" class="list_menu__item list_menu__down js_down" title="下载" aria-haspopup="true" data-target="menu_down">
				    <i class="list_menu__icon_down"></i>
				    <span class="icon_txt">下载</span>
				</a>
				
				<a href="javascript:;" class="list_menu__item list_menu__share js_share" title="分享" aria-haspopup="true" data-aria="menu_share">
				    <i class="list_menu__icon_share"></i>
				    <span class="icon_txt">分享</span>
				</a>
			</div>
		    </div>
				
		    <div class="songlist__artist" title="周杰伦">
			
			<a href="https://y.qq.com/n/yqq/singer/0025NhlN2yWrP4.html" data-singermid="0025NhlN2yWrP4" data-singerid="4558" title="周杰伦" class="singer_name">周杰伦</a>
			
		    </div>
		    <div class="songlist__time">03:05</div>
		    <div class="songlist__other">
		    </div>
		</div>
	</li>
</ul>

    <div class="mod_page_nav js_pager_comment" id="pageList">
    <a href="javascript:;" class="js_pageindex current">1</a>
    	<!-- <strong class="more">...</strong> -->
    	<a href="javascript:;" class="next js_pageindex" title="下一页" hidefocus="">
    	<span>&gt;</span></a><span id="pagesAll">共页</span>
    </div>
	<script>
		//页面默认显示热歌榜页面
		/* var loginAccount = "${sessionScope.loginAccount}"; */
			var accountId = 10;
		 	var loginAccount = {
					accountId : "10",
					accountTel : "17519485014",
					accountPwd : "123456",
					accountPicture : "",
					vipStatus : "0"
			}; 
		 	
		$(document).ready(function(){
				$("#titleContext").text("热歌榜");
				$("#subtitleContext").text("收录本周热度排行歌曲");
				($("#titleContext").text(),1);
				sendAjax($("#titleContext").text(),1);
				selectItem($("#hotSongList"));
		})
		//热歌榜
		$("#hotSongList").click(function() {
			$("#titleContext").text("热歌榜");
			$("#subtitleContext").text("收录本周热度排行歌曲");
			sendAjax($("#titleContext").text(),1);
			selectItem(this);
		})
		
		//新歌榜
		$("#newSongList").click(function() {
			$("#titleContext").text("新歌榜");
			$("#subtitleContext").text("收录本周最新歌曲");
			sendAjax($("#titleContext").text(),1);
			selectItem(this);
		})
		
		//内地榜
		$("#inlandSongList").click(function() {
			$("#titleContext").text("内地榜");
			$("#subtitleContext").text("收录内地流行歌曲");
			sendAjax($("#titleContext").text(),1);
			selectItem(this);
		})
		
		//港台榜
		$("#hktwSongList").click(function() {
			$("#titleContext").text("港台榜");
			$("#subtitleContext").text("收录港台地区流行歌曲");
			sendAjax($("#titleContext").text(),1);
			selectItem(this);
		})
		
		//欧美榜
		$("#europeSongList").click(function() {
			$("#titleContext").text("欧美榜");
			$("#subtitleContext").text("收录欧美流行歌曲");
			sendAjax($("#titleContext").text(),1);
			selectItem(this);
		})
		
		//韩国榜
		$("#koreaSongList").click(function() {
			$("#titleContext").text("韩国榜");
			$("#subtitleContext").text("收录韩国流行歌曲");
			sendAjax($("#titleContext").text(),1);
			selectItem(this);
		})
		
		//日本榜
		$("#japanSongList").click(function() {
			$("#titleContext").text("日本榜");
			$("#subtitleContext").text("收录日本流行歌曲");
			sendAjax($("#titleContext").text(),1);
			selectItem(this);
		})
		
		//选中歌单时是被选中状态(背景颜色改变)
		function selectItem(obj) {
			$("#inlandSongList").removeClass("selectItem");
			$("#hktwSongList").removeClass("selectItem");
			$("#europeSongList").removeClass("selectItem");
			$("#koreaSongList").removeClass("selectItem");
			$("#japanSongList").removeClass("selectItem");
			$("#hotSongList").removeClass("selectItem");
			$("#newSongList").removeClass("selectItem");
			$(obj).addClass("selectItem");
		}
		//发送ajax显示榜单列表
		function sendAjax(rankingCondition,pageNum){
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/SongServlet",
				type:"post",
				data:{op:"showList",rankingCondition:rankingCondition,pageNum:pageNum,pageSize:"10"},
				dataType:"json",
				success:function(result,status,xhr){
					$("#songShowList").empty();
					$("#pageList").empty();
					if (result.data=="") {
						//总页数和下一页追加
						$("#pageList").append("第<span id=\"pagesTotal\" >1</span>页&nbsp&nbsp"+
											" 共<span id=\"pagesAll\" >1</span>页");
					}else {
						for (var i = 0; i < result.data.length; i++) {
							//头像不存在时候
							if (result.data[i].singer.singerPicture==null) {
								$("#songShowList").append("<li>"+
										" <div class=\"songlist__item\">"+
										" <div class=\"songlist__edit songlist__edit--check sprite\">"+
									    " <input type=\"checkbox\" class=\"songlist__checkbox\"></div>"+
									    " <div class=\"songlist__number  songlist__number--top\">"+(i+1)+"</div>"+
								        " <div class=\"songlist__rank\"><i class=\"icon_rank_popular\"></i>"+(550-i*70)+"%</div>"+
								        " <div class=\"songlist__songname\">"+
									    " <span class=\"songlist__songname_txt\" style=\"visibility: visible;\">"+
									    " <a href=\"#\" class=\"songlist__cover album_name\" data-albummid=\"0009C3rp3Kfwg0\" "+
									    " data-albumid=\"12924001\"><img class=\"singerPicture\""+ 
									    " src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/singerpic.jpg\" style=\"display: block; visibility: visible;\"></a>"+
									    " <a href=\"#\" class=\"songDetail\">"+result.data[i].songName+"</a>"+
									    " </span><div class=\"mod_list_menu\"><input type=\"hidden\" class=\"playSongId\" value="+result.data[i].songId+">"+
										" <a href=\"javascript:;\" class=\"list_menu__item list_menu__play js_play playSong\" title=\"播放\">"+
										" <i class=\"list_menu__icon_play\"></i><span class=\"icon_txt\">播放</span></a></div></div>"+
								   		" <div class=\"songlist__artist\" >"+
										" <a href=\"#\" data-singerid=\"4558\" class=\"singer_name\">"+result.data[i].singer.singerName+"</a>"+
										" <input type=\"hidden\" class=\"singerId\" value="+result.data[i].singer.singerId+">"+
								    	" </div><div class=\"songlist__time\">"+result.data[i].songTime+"</div>"+
								    	" <div class=\"songlist__other\"> </div></div></li>");
							} else {
								$("#songShowList").append("<li>"+
										" <div class=\"songlist__item\">"+
										" <div class=\"songlist__edit songlist__edit--check sprite\">"+
									    " <input type=\"checkbox\" class=\"songlist__checkbox\"></div>"+
									    " <div class=\"songlist__number  songlist__number--top\">"+(i+1)+"</div>"+
								        " <div class=\"songlist__rank\"><i class=\"icon_rank_popular\"></i>"+(550-i*70)+"%</div>"+
								        " <div class=\"songlist__songname\">"+
									    " <span class=\"songlist__songname_txt\" style=\"visibility: visible;\">"+
									    " <a href=\"#\" class=\"songlist__cover album_name\" data-albummid=\"0009C3rp3Kfwg0\" "+
									    " data-albumid=\"12924001\"><img class=\"singerPicture\""+ 
									    " src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/"+result.data[i].singer.singerPicture+"\" style=\"display: block; visibility: visible;\"></a>"+
									    " <a href=\"#\" class=\"songDetail\">"+result.data[i].songName+"</a>"+
									    " </span><div class=\"mod_list_menu\"><input type=\"hidden\" class=\"playSongId\" value="+result.data[i].songId+">"+
										" <a href=\"javascript:;\" class=\"list_menu__item list_menu__play js_play playSong\" title=\"播放\">"+
										" <i class=\"list_menu__icon_play\"></i><span class=\"icon_txt\">播放</span></a></div></div>"+
								   		" <div class=\"songlist__artist\" >"+
										" <a href=\"#\" data-singerid=\"4558\" class=\"singer_name\">"+result.data[i].singer.singerName+"</a>"+
										" <input type=\"hidden\" class=\"singerId\" value="+result.data[i].singer.singerId+">"+
								    	" </div><div class=\"songlist__time\">"+result.data[i].songTime+"</div>"+
								    	" <div class=\"songlist__other\"> </div></div></li>");
							}
					
						}
						//分页追加
						for (var i = 1; i <= result.pages; i++) {
							if (i==result.pageNum) {
								if (i==1) {
									$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
								}else {
									$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
								}
							}else {
								$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex pageButton\">"+i+"</a>");
							}
						}
						//总页数和下一页追加
						$("#pageList").append(" <a href=\"javascript:;\" class=\"next js_pageindex nextPage\"><span>&gt;</span></a>"+
											" 第<span id=\"pagesTotal\" >"+result.pageNum+"</span>页&nbsp&nbsp"+
											" 共<span id=\"pagesAll\" >"+result.pages+"</span>页");
					}
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
		}
		
		//对页码做点击事件
		$(document).on("click",".pageButton",function(){
			var nowPage = $(this).text();
				sendAjax($("#titleContext").text(),nowPage);
				$("#pagesTotal").text(nowPage);
		})
		
		//下一页按钮
			$(document).on("click",".nextPage",function(){
			var nowPage = $("#pagesTotal").text();
			var maxPage = $("#pagesAll").text();
			if (nowPage<maxPage) {
				sendAjax($("#titleContext").text(),nowPage*1+1);
				$("#pagesTotal").text(nowPage*1+1);
			}
		})
		
		//歌曲后面播放按钮
		$(document).on("click",".playSong",function(){
			var songId = $(this).prev().val();
			//判断是否被收藏了
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/PlayListServlet",
				type:"post",
				data:{op:"existPlayList",songId:songId,accountId:accountId},
				dataType:"text",
				success:function(result,status,xhr){
					//未添加到播放列表
					if ("yesPlay"!=result) {
						$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/PlayListServlet",
							type:"post",
							data:{op:"addPlayList",songId:result,accountId:accountId},
							dataType:"text",
							success:function(result,status,xhr){
								if ("addyes"==result) {
										alert("添加到播放列表成功")
										window.open("${pageContext.request.contextPath}/front/play.jsp?songId="+songId);
								}else if ("addno"==result) {
										alert("添加到播放列表失败");
									}
								},
								error:function(xhr,status,error){
									alert("ajax异步请求失败");
								}
							});
						}else if ("yesPlay"==result) {
							window.open("${pageContext.request.contextPath}/front/play.jsp");
						}
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
		})
		
		//点击歌曲进入歌曲信息页面
		$(document).on("click",".songDetail",function(){
			var songId = $(this).parent().next().children("input").val();
			window.open("${pageContext.request.contextPath}/front/comment.jsp?songId="+songId);
		})
		
		//点击歌手名进入歌手信息页面
		$(document).on("click",".singer_name",function(){
			var singerId = $(this).next().val();
			window.open("${pageContext.request.contextPath}/front/singer_personal_page.jsp?singerId="+singerId);
		})
		
		//播放所有按钮
		$("#playAll").click(function(){
			//获取全部列表歌曲的id
			var playSongId = $(".playSongId");
			for (var i = 0; i < playSongId.length; i++) {
				var songId = $(playSongId[i]).val();
				//判断是否被收藏了
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/PlayListServlet",
					type:"post",
					data:{op:"existPlayList",songId:songId,accountId:accountId},
					dataType:"text",
					success:function(result,status,xhr){
						//未添加到播放列表
						if ("yesPlay"!=result) {
							$.ajax({
								async:true,
								url:"${pageContext.request.contextPath}/PlayListServlet",
								type:"post",
								data:{op:"addPlayList",songId:result,accountId:accountId},
								dataType:"text",
								success:function(result,status,xhr){
									
									},
									error:function(xhr,status,error){
										alert("ajax异步请求失败1");
									}
								});
							}else if ("yesPlay"==result) {
								
							}
						},
						error:function(xhr,status,error){
							alert("ajax异步请求失败2");
						}
					});
			}
			window.open("${pageContext.request.contextPath}/front/play.jsp");
		})
		
	</script>
	</body>
</html>
